<template>
    <view>
        <!-- 别人发出的消息 -->

        <view class="other" v-if="row.msg.user_info.uid != myData.id">
            <!-- 右键 -->
            <view class="left-click" v-show="row.msg.id==lClickId">
                <view @tap="copyFunc(row)" v-if="row.msg.type==0">复制</view>
                <!--<view @tap="deleteFunc(row.id,index)" v-if="row.msgType!=1">删除</view>-->
                <!--<view @tap="forwardFunc(row)" v-if="row.msgType!=7">转发</view>-->
                <!--<view @tap="collectFunc(row)" v-if="row.msgType==1">收藏</view>-->
                <text @tap="rollBackFunc(row)">撤回</text>
            </view>

            <!-- 左-头像 -->
            <view :class="row.type==0?'left text':'left'" @tap="goDetails(row.msg.user_info.uid)">
                <image :src="staticPhoto + row.msg.user_info.face + '?_=' + imgRan" :lazy-load="true"></image>
            </view>
            <!-- 右-用户名称-时间-消息 -->
            <view class="right">
                <view class="username">
                    <view class="name">{{row.msg.user_info.name}}</view>
                    <!--<view class="time">{{row.operTime}}</view>-->
                </view>
                <!-- 文字消息 -->
                <view @longtap="openLeft(row)" v-if="row.msg.type == 0" class="bubble">
                    <rich-text :nodes="row.msg.content.text"></rich-text>
                </view>
                <!-- 语音消息 -->
                <view @longtap="openLeft(row)" v-if="row.msg.type == 1" class="bubble voice" @tap="playVoice(row.msg)"
                      :class="playMsgid == row.msg.id?'play':''">
                    <view class="icon other-voice"></view>
                    <view class="length">{{row.msg.content.length }}</view>
                </view>
                <!-- 图片消息 -->
                <view @longtap="openLeft(row)" v-if="row.msg.type == 2" class="bubble img" @tap="showPic(row.msg)">
                    <image :src="staticPath + row.msg.content.url"
                           :style="{ width: row.msg.content.w + 'px', height: row.msg.content.h + 'px' }"
                           :lazy-load="true"
                    />
                </view>
                <!-- 视频消息 -->
                <view v-if="row.msg.type == 3" class="bubble img">
                    <video :src="staticPath + row.msg.content.url" objectFit="cover" style="max-height: 200px;"
                           :lazy-load="true"/>
                </view>
                <!-- 红包 -->
                <view v-if="row.msg.type == 5" @tap="openRedEnvelopeFunc(index)">
                    <view class="message-red-packet-left"
                          :style="row.msg.context.surplus_money===0?'background:#F7DFC3':'background:#F09D47'">
                        <view class="text">
                            <span class="packet">{{row.msg.content.blessing}}</span>
                            <image :src="redImg(row.msg)"></image>
                        </view>
                        <view :class="row.msg.content.surplus_money===0?'footer2':'footer'">红包</view>
                        <view class="arrow-org"
                              :style="row.msg.content.surplus_money===0?'background:#F7DFC3':'background:#F09D47'"></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

    import _data from "../../util/_data";

    export default {
        name: 'left-bubble',
        components: {},
        props: {
            row: {
                type: Object,
                default() {
                    return {};
                }
            },
            playMsgid: {
                type: String,
                default: ''
            },
            index: {
                type: Number,
                default: 0
            },
            msgImgList: {
                type: Array,
                default: []
            },
            myData: {
                type: Object,
                default() {
                    return {
                        id: ''
                    };
                }
            },
            chat_id: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                lClickId: ''
            };
        },
        computed: {
            myPhoto() {
                if (_data.data('cache').local_photo) {
                    return _data.data('cache').local_photo;
                } else {
                    return _data.staticPhoto() + _data.data('user_info').photo;
                }
            },
            redImg(msg){
                return msg.content.surplus_money===0?'../../static/img/red-chai.png':'../../static/img/red.png'
            },
            imgRan() {
                return Math.random();
            },
            staticPath() {
                return _data.staticChat() + this.chat_id + '/';
            },
            staticPhoto() {
                return _data.staticPhoto();
            }
        },
        filters: {
            formatDate: function (e) {
                // 获取js 时间戳
                let time = new Date().getTime();
                // 去掉 js 时间戳后三位
                time = parseInt((time - e) / 1000);
                // 存储转换值
                let s;
                if (time < 60 * 10) {
                    // 十分钟内
                    return '刚刚';
                } else if (time < 60 * 60 && time >= 60 * 10) {
                    // 超过十分钟少于1小时
                    s = Math.floor(time / 60);
                    return s + '分钟前';
                } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
                    // 超过1小时少于24小时
                    s = Math.floor(time / 60 / 60);
                    return s + '小时前';
                } else if (time < 60 * 60 * 24 * 3 && time >= 60 * 60 * 24) {
                    // 超过1天少于3天内
                    s = Math.floor(time / 60 / 60 / 24);
                    return s + '天前';
                } else {
                    // 超过3天
                    var date = new Date(e);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                    var Y = date.getFullYear() + '-';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    var D = date.getDate() + ' ';
                    var h = date.getHours() + ':';
                    var m = date.getMinutes() + ':';
                    var ss = date.getSeconds();
                    return Y + M + D + h + m + ss;
                }
            }
        },
        methods: {
            openLeft(row) {
                this.lClickId = row.msg.id
                //this.$emit('openLeft', row);
            },
            goDetails(obj) {
                this.$emit('goDetails', obj);
            },
            //收藏表情
            collectFunc({msgContext}) {
                this.$socket.addEmoticon(this._user_info.id, msgContext, res => {
                    if (res.success) {
                        uni.showToast({
                            icon: 'none',
                            title: '添加成功'
                        })
                    }
                });
            },
            // 打开红包
            openRedEnvelopeFunc(msg) {
                this.$emit('openRedEnvelopeFunc', msg);
            },
            //处理红包数据
            redenvelopeProcess(msgContext) {
                return msgContext
            },
            // 预览图片
            showPic(msg) {
                uni.previewImage({
                    indicator: "none",
                    current: this.staticPath + msg.content.url.replace('_thumb', ''),
                    urls: this.msgImgList
                });
            },
            // 播放语音
            playVoice(msg) {
                this.AUDIO.stop();
                if (this.playMsgid == msg.id) {
                    this.playMsgid = null;
                } else {
                    this.playMsgid = msg.id;
                    //	this.AUDIO.obeyMuteSwitch = false;
                    this.AUDIO.src = this.staticPath + msg.content.url + '?_=' + Math.random();
                    this.$nextTick(function () {
                        this.AUDIO.play();
                    });
                }
            },
            playMp3() {
                let s = JSON.parse(msg.msgContext);
                const innerAudioContext = uni.createInnerAudioContext();
                innerAudioContext.autoplay = true;
                innerAudioContext.src = this.staticPath + msg.content.url + '?_=' + Math.random();
                innerAudioContext.onPlay(() => {
                    console.log('开始播放');
                });
                innerAudioContext.onError((res) => {
                    console.log(res.errMsg);
                    console.log(res.errCode);
                });
            },
            recordToJson(msg) {
                return JSON.parse(msg);
            },
            //复制
            copyFunc(row) {
                this.$emit('copyFunc', row);
                this.lClickId = null;
                return;
                uni.setClipboardData({
                    data: row.msg.content.text,
                    success: () => {
                        uni.showToast({
                            title: "复制成功"
                        })
                    }
                });
            },
            //撤销
            rollBackFunc(row) {
                let _this = this;
                uni.showActionSheet({
                    itemList: ['确认'],
                    success: function (res) {
                        if (res.tapIndex == 0) {
                            _this.$emit('rollBackFunc', row);
                        }
                    },
                    fail: function (res) {
                        console.log(res.errMsg);
                    }
                });
                this.lClickId = null;
            },
            //转发
            forwardFunc({msgType, msgContext}) {
                this.$u.route({
                    url: 'pages/chat/forward',
                    params: {msgType, msgContext}
                });
            },
            //名片
            linkToCard(id) {
                this.$u.route({
                    url: 'pages/businessCard/businessCard',
                    params: {id: id, source: 1}
                })
            },
            //表情转换
            transformFace(text) {
                return transform(text)
            },
        }
    }
</script>

<style lang="scss">
    @import "@/static/css/chat/style.scss";
</style>
